<!--
 * @Author: wushikang
 * @Date: 2021-10-25 09:37:08
 * @LastEditors: wushikang
 * @LastEditTime: 2021-10-25 14:50:59
 * @Description: 
-->
<!--
 * @Description: 
 * @Author: WuShiKang
 * @Date: 2021-04-06 11:43:13
 * @LastEditors: WuShiKang
 * @LastEditTime: 2021-04-16 00:49:57
-->


<template>
  <div class="user_details">
    <!-- 头像 -->
    <div class="userface">
      <div class="photo">
        <div class="box">
          <img :src="user.userFace" alt />
        </div>
      </div>

      <div style="padding-top:50px;text-align:right">
        <el-button size="small" type="text" @click="toAlterUserface">修改头像</el-button>
      </div>
    </div>


    <div class="info">
      <el-form label-width="100" size="small">
        <el-form-item label="用户姓名">{{user.realname}}</el-form-item>
        <el-form-item label="用户手机">{{user.telephone}}</el-form-item>
        <el-form-item label="用户性别">
          {{user.gender | Sex()}}
        </el-form-item>
        <el-form-item label="用户角色">{{roleName}}</el-form-item>
        <el-form-item label="注册时间">{{user.registerTime |format }}</el-form-item>
        <el-form-item label="登录用户">{{user.username}}</el-form-item>
        <el-form-item label="用户状态">
          <el-tag size="small">{{ user.status }}</el-tag>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:right;padding-right:220px;border-top:1px solid seashell">
      <el-button size="small" type="text" @click="toAlterInfo">修改个人信息</el-button>
    </div>

    
    <!-- 个人信息模态框 -->
    <el-dialog
      title="个人信息修改"
      :visible.sync="visible"
      width="50%"
      class="customer_modal"
    >
      <el-form size="small" :model="form" ref="userForm" :rules="rules" label-width="80px">
        <el-form-item label="用户名">
          <el-input disabled :placeholder="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
        <el-form-item label="用户手机" prop="telephone">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="alterUserfaceHandler()">确 定 </el-button>
      </span>
    </el-dialog>


    <el-dialog title="更改头像" :visible.sync="visible_userface" width="50%" class="customer_modal">
      <div style="display:flex">
        <div class="photo" style="width:120px; margin:0 auto;flex:1">
          <img :src="userface" alt style="width:100%" />
        </div>
        <div style="flex:1">
          <el-upload
            class="avatar-uploader"
            action="http://81.69.24.232/pet/jz_upload.php"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible_userface = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="alterUserfaceHandler">确 定 修 改</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import _ from "lodash";
import request from "@/utils/request";
import  {mapState , mapActions } from 'vuex'
import qs from "qs";
export default {
  data() {
    return {
      form: {},
      userface: "",
      imageUrl:"",
      Usersdata:{},
      visible: false,
      visible_userface: false,
      rules: {
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
      },
      fileList: [],
    };
  },
  computed: {
        ...mapState("userData", ["user","roleName"]),

  },
  methods: {
       ...mapActions("userData",["findAllUserData"]),
       
       toAlterUserface(){
            this.imageUrl=this.user.userFace;
            this.visible_userface=true;

        },
       handleAvatarSuccess(res, file) {
          // 将文件服务器响应的图片在线地址，设置到product
            this.form= _.clone(this.user);
            this.form.userFace=res;
         // 将成功上传的图片设置到预览标签上去
            this.imageUrl = res;
        },

        beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //修改个人信息
      toAlterInfo(){
        this.form= _.clone(this.user);
        this.visible=true;
      },
      //修改照片
      //修改个人信息缺点
      alterUserfaceHandler(event){
       this.Usersdata = qs.stringify(this.form);
       this.alterUserMethod();
      },

      alterUserMethod(){
        request.post("/baseUser/saveOrUpdate", this.Usersdata).then((res) => {
        // 数据重载
        this.findAllUserData(this.$route.query.id);
        // 关闭模态框
         this.visible_userface=false;
         this.visible=false;
        // 提示成功操作的信息
        this.$message.success(res.message);
      });
      }
   },
   created(){
     let id=this.$route.query.id;
     this.findAllUserData(id);
   }
    
};
</script>
<style lang="scss" scoped>
.userface {
  display: flex;
  padding: 1em 200px;
  & > div {
    flex: 1;
  }
  .photo {
    .box {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
    }
    img {
      width: 100%;
    }
  }
  border-bottom: 2px solid seashell;
  margin-bottom: 1em;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
